<style scoped>
    .demo-Circle-custom{
        & h1{
            color: #3f414d;
            font-size: 28px;
            font-weight: normal;
        }
        & p{
            color: #657180;
            font-size: 14px;
            margin: 10px 0 15px;
        }
        & span{
            display: block;
            padding-top: 15px;
            color: #657180;
            font-size: 14px;
            &:before{
                content: '';
                display: block;
                width: 50px;
                height: 1px;
                margin: 0 auto;
                background: #e0e3e6;
                position: relative;
                top: -15px;
            };
        }
        & span i{
            font-style: normal;
            color: #3f414d;
        }
    }
</style>
<template>
    <div>
        <Row>
            <Col span="24">
                <RadioGroup v-model="dtsQueryParam.prodectPI" type="button">  
                    <Radio label="0">全部</Radio>
                    <Radio label="1">迭代1</Radio>
                    <Radio label="2">迭代2</Radio>
                    <Radio label="3">迭代3</Radio>
                    <Radio label="4">迭代4</Radio>
                </RadioGroup>
            </Col>
        </Row>
        <Divider style="margin-bottom:20px;margin-top:20px"/>
        <Row :gutter="16">
            <Col span="6">
                <Circle :size="200" :percent="dtsStatInfo.closeRate" :stroke-color="colorStr" style="margin-top:20px">
                    <div style="margin-bottom:20px">问题单解决率</div>
                    <span class="demo-Circle-inner" style="font-size:24px;margin-top:20px">{{dtsStatInfo.closeRate}}%</span>
                </Circle>
            </Col>
            <Col span="18">
                <Row :gutter="16">
                    <Col span="6">
                        <Card dis-hover style="text-align:center;background: ghostwhite;">
                            <p slot="title">问题单总数量</p>
                            {{dtsStatInfo.allNum}}
                        </Card>
                    </Col>
                    <Col span="6">
                        <Card dis-hover style="text-align:center;background: ghostwhite;">
                            <p slot="title">待修改问题单数量</p>
                            {{dtsStatInfo.devNum}}
                        </Card>
                    </Col>
                    <Col span="6">
                        <Card dis-hover style="text-align:center;background: ghostwhite;">
                            <p slot="title">待审核问题单数量</p>
                            {{dtsStatInfo.reviewNum}}
                        </Card>
                    </Col>
                    <Col span="6">
                        <Card dis-hover style="text-align:center;background: ghostwhite;">
                            <p slot="title">待回归问题单数量</p>
                            {{dtsStatInfo.testerNum}}
                        </Card>
                    </Col>
                </Row>
                <Row :gutter="16" style="margin-top:20px">
                    <Col span="6">
                        <Card dis-hover style="text-align:center;background: ghostwhite;">
                            <p slot="title">严重问题单数量</p>
                            123456
                        </Card>
                    </Col>
                    <Col span="6">
                        <Card dis-hover style="text-align:center;background: ghostwhite;">
                            <p slot="title">一般问题单数量</p>
                            123456
                        </Card>
                    </Col>
                    <Col span="6">
                        <Card dis-hover style="text-align:center;background: ghostwhite;">
                            <p slot="title">提示问题单数量</p>
                            123456
                        </Card>
                    </Col>
                </Row>
            </Col>
        </Row>
        <Row :gutter="16">
            <!-- 表格 -->
            <Col span="12">
                <Card dis-hover :bordered="false">
                    <p slot="title">开发问题单统计</p>
                    <Table :columns="columns1" :data="data1"></Table>
                </Card>
            </Col>
            <Col span="12">
                <Card dis-hover :bordered="false">
                    <p slot="title">测试问题单统计</p>
                    <Table :columns="columns1" :data="data1"></Table>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        created(){
            this.initDTSStatInfo();
        },
        data () {
            return {
                dtsQueryParam:{
                    prodectPI:'0'
                },
                dtsStatInfo:'',
                colorStr:"",
                columns1: [
                    {title: '姓名',key: 'dtsNo'},
                    {title: '待修改',key: 'dTitle'},
                    {title: '待审核',key: 'dTitle'}
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        },
        methods: {
            /**
             * 加载问题单统计数据
             */
            initDTSStatInfo(){
                this.$http.post(config.serverIpAndPort + "dts/dtsStat", 
                    this.dtsQueryParam
                ).then(response => {
                    this.dtsStatInfo = response.body;
                    if(this.dtsStatInfo.closeRate < 50){
                        this.colorStr = '#ed4014';
                    } else if(this.dtsStatInfo.closeRate < 90){
                        this.colorStr = '#ff9900';
                    } else {
                        this.colorStr = '#19be6b';
                    }

                }, response => {
                    console.log('失败');
                });
            }
        }
    }
</script>